<template>
	<div style="padding: 50px 50px; height: 100vh">
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="onFormInit">
			<template #form-btn="props">
				<div style="display: flex; justify-content: center">
					<el-button class="yd-form-btn" type="primary" @click="onFormInit(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<Yd-table
			:form-data="formData"
			:table-data="tableData"
			:table-config="tableConfig"
			@rowClickHandler="onSearch"
			@sortChangeHandler="onSearch"
			@currentChangeHandler="onSearch"
			@selection-changeHandler="onSelectionChange"
			@sizeChangeHandler="onSearch"
		>
		</Yd-table>
	</div>
</template>
<script lang="tsx" setup>
import ydForm from '@/components/YdForm/index.vue';
// import YdTable from '@/components/YdTable/index.vue';
import { reactive, ref, h } from 'vue';
import { queryBusinessOverviewListPage } from '@/api/test';

const formData = reactive<FormModelType>({});

const myForm = ref();
let formOptions = ref<FormOptionType>([
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		span: 7,
		dateType: 'datetimerange',
		shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'last1h',
	},

	{
		type: 'select',
		label: '营业厅网台',
		prop: 'systemId',
		selectKey: 'id',
		api: { name: 'queryDefaultAppSystemOptions', params: {} },
	},

	{
		type: 'select',
		label: '数据中心',
		prop: 'dataCenterList',
		selectKey: 'id',
		attrs: {
			multiple: true,
		},
		cascaders: [
			{
				cascadersParams: 'areaCodeList',
				api: {
					params: [],
					name: 'queryCityArea',
				},
			},
		],
		api: { name: 'queryDataCenter', params: {} },
	},
	{
		type: 'select',
		label: '归属城市',
		span: 6,
		prop: 'areaCodeList',
		selectKey: 'code',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
		// api: { name: 'queryBusinessBySystemId', params: {} },
	},
	{
		type: 'input',
		label: '业务名称',
		prop: 'username',
		attrs: {
			clearable: true,
		},
		rules: [
			{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur',
			},
			{
				min: 2,
				max: 6,
				message: '用户名在2-6位置之间',
				trigger: 'blur',
			},
		],
	},
]);

// 表单按钮
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '下载',
		handler: (e: validateResultType) => {
			console.log('下载', e);
		},
	},
]);

let tableData = ref([]);
let tableConfig = reactive<TableConfigType>({
	enableSelection: true,
	columns: [
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '访问量',
			prop: 'visitCount',
			sortable: true,
		},
		{
			label: '完整访问量',
			prop: 'completeVisitCount',
			sortable: true,
		},
		{
			label: '平均处理时长',
			prop: 'avgResponseTime',
			sortable: true,
			formatter(row, val) {
				return val;
			},
		},
		{
			label: '告警访问量',
			prop: 'alarmVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'alarmVisitCount',
					color: '#ff9a0c',
					handler: (scope) => {
						const row = scope.row;
						let data = JSON.stringify({
							systemId: row.systemId,
							startTime: formData.startTime,
							endTime: formData.endTime,
							businessCodeList: [row.businessCode],
							isAlarm: 1,
						});
						console.log('告警访问量');
					},
				},
			],
		},
		{
			label: '失败访问量',
			prop: 'failVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					color: '#fe5578',

					rowKey: 'failVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 0,
						});
					},
				},
			],
		},
		{
			label: '成功访问量',
			prop: 'successVisitCount',
			sortable: true,
			operation: [
				{
					text: undefined,
					rowKey: 'successVisitCount',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
							dealState: 1,
						});
					},
				},
			],
		},
		{
			label: '成功率',
			prop: 'successRate',
			sortable: true,
			render(row, value) {
				return h('sapn', value + '%');
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '明细',
					handler: (scope) => {
						let data = JSON.stringify({
							systemId: scope.row.systemId,
							businessCodeList: [scope.row.businessCode],
							dataCenter: formData.dataCenterList,
							areaCodeList: formData.areaCodeList,
							startTime: formData.startTime,
							endTime: formData.endTime,
						});
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
		orderByColumn: 'visitCount',
		isAsc: 'desc',
		total: 0,
	},
	// 工具栏
	toolBar: [
		{
			name: '新增',
			icon: 'yd-icon-plus',
			permi: ['customAlarmConfig:add'],
			handler: () => {
				console.log('新增');
			},
		},
		{
			name: '修改',
			icon: 'yd-icon-edit',
			permi: ['customAlarmConfig:edit'],
			disable: 'single',
			handler: () => {
				console.log('修改');
			},
		},
		{
			name: '删除',
			icon: 'yd-icon-delete',
			permi: ['customAlarmConfig:delete'],
			disable: 'multiple',
			handler: () => {
				console.log('删除');
			},
		},
	],
	loading: true,
});

const onFormInit = (_model: FormModelType) => {
	formData.pageNum = 1;
	onSearch();
};

const onSearch = () => {
	tableConfig.loading = true;
	queryBusinessOverviewListPage(formData)
		.then((res: any) => {
			tableData.value = res.result?.data;
			if (tableConfig.pagination) {
				tableConfig.pagination.total = res.result?.total;
			}
		})
		.finally(() => {
			tableConfig.loading = false;
		});
};

const onSelectionChange = (e: Array<TableOptionType>) => {
	console.log('selectchange', e);
};
</script>
